<template>
    <div>
        首页内容
        <img src="https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/259018/24/28211/69557/67c7b103Fb2c428a6/861906620564dab7.jpg"
            alt="">
    </div>

    <div class="btn">
        <p>点击打印数据：{{ count }}</p>
        <button id="counts" @click="onClick">点击</button>
        <button id="count" @click="count++">点击</button>
    </div>
    <div ref="elrf"></div>


</template>

<script setup>
import { onMounted, onUpdated, ref } from 'vue';

const count = ref(0);
const elrf = ref();
const onClick = () => { 
    console.log("我点击了按钮操作。。。。。");
    count.value += 1;
  
    
}

//渲染的钩子函数 当页面加载完成后 立即渲染数据 
onMounted(() => { 
    console.log("页面加载完成。。。。。");
    // 通过后台进行的列表渲染
    onClick()
    console.log(elrf.value);
    
})
onUpdated(() => { 
    console.log(document.getElementById("count").textContent ="count的值是："+count.value);
})


</script>

<style scoped>
.btn{
    width: 80%;
    height: 40px;
    background-color: aqua;
    margin-left: 120px;
    text-align: center;
}
</style>